<template>
  <div class="app-container">
    <el-card class="box-card" shadow="never" style="border:0px;">
      <div slot="header" style="font-size:14px;font-weight:bold;">
        <span>还款管理</span>
      </div>
    <div class="table" id="searchBox">
      <table class="table_wrap">
        <tbody>
          <tr>
              <td class="table_title td_color" align="center">客户姓名</td>
              <td class="table_td"><span v-text="repayData.borrowerName"></span></td>

              <td class="table_title td_color" align="center">身份证</td>
              <td class="table_td"><span v-text="repayData.borrowerIdCardNo"></span></td>

              <td class="table_title td_color" align="center">手机号</td>
              <td class="table_td"><span v-text="repayData.borrowerPhone"></span></td>
          </tr>
          <tr>
              <td class="table_title td_color" align="center">项目名称</td>
              <td class="table_td"><span v-text="repayData.projectName"></span></td>

              <td class="table_title td_color" align="center">所属机构</td>
              <td class="table_td"><span v-text="repayData.orgName"></span></td>

              <td class="table_title td_color" align="center">渠道</td>
              <td class="table_td"><span v-text="repayData.channelName"></span></td>
          </tr>
          <tr>
              <td class="table_title td_color" align="center">资方</td>
              <td class="table_td"><span v-text="repayData.capitalName"></span></td>

              <td class="table_title td_color" align="center">产品</td>
              <td class="table_td"><span v-text="repayData.productName"></span></td>

              <td class="table_title td_color" align="center">贷款金额</td>
              <td class="table_td"><span v-text="repayData.loanAmount"></span></td>
          </tr>
          <tr>
              <td class="table_title td_color" align="center">贷款期限</td>
              <td class="table_td"><span v-text="repayData.loanTerm"></span></td>

              <td class="table_title td_color" align="center">贷款日期</td>
              <td class="table_td"><span v-text="repayData.loanDate"></span></td>

              <td class="table_title td_color" align="center">还款方式</td>
              <td class="table_td"><span v-text="repayData.repayMethodName"></span></td>
          </tr>
        </tbody>
      </table>
    </div>

    <vxe-toolbar ref="xToolbar">
         <template #buttons>
         <el-button v-permission="'system:advance-repay-info:access'" type="text" @click="openAdvancePayment">提前还款</el-button>
        </template>
    </vxe-toolbar>
    <vxe-table
      v-loading="loading"
      :data="taskData"
      border="none"
      highlight-hover-row
      show-header-overflow
      show-overflow
      align="center"
      :header-cell-style="{ background: '#F7F7F8', color: '#606266' }"
      @cell-dblclick="cellDblclick"
    >
      <vxe-table-column type="seq" title="序号" width="50"/>
      <vxe-table-column title="期数" field="term" width="80"/>
      <vxe-table-column title="还款日期" field="repayDate" width="110"/>
      <vxe-table-column title="应收本金" field="receivableAmonunt" width="175"/>
      <vxe-table-column title="应收利息" field="receivableInterest" width="130"/>
      <vxe-table-column title="总月供" field="monthSupplyTotal" width="150"/>
      <vxe-table-column title="剩余本金" field="surplusAmonunt" min-width="150"/>
      <vxe-table-column title="剩余利息" field="surplusInterest" min-width="150"/>
      <vxe-table-column title="还款状态" field="repayStatusName" min-width="110"/>
      <vxe-table-column title="最后还款时间" field="lastLoanTime" min-width="120"/>
      <vxe-table-column title="累计还款金额" field="cumulativeLoanMoney" min-width="130"/>
      <vxe-table-column title="本月未还金额" field="thisMonthNoAmount" min-width="120"/>
      <vxe-table-column title="剩余在贷" field="balanceAmount" min-width="100"/>
      <vxe-table-column title="操作" fixed="right" min-width="200">
        <template v-slot="{ row }">
          <el-button v-permission="'system:repay-service:access'" type="text" @click="openRepayWindow(row)" v-if="row.thisMonthNoAmount != 0">还款</el-button>
          <el-button v-permission="'system:repay-record-list:access'" type="text" @click="toRepayRecord(row)">还款记录</el-button>
        </template>
      </vxe-table-column>
    </vxe-table>
    </el-card>
    <vxe-pager
      class="pager"
      @page-change="changePage"
      :current-page.sync="listQuery.pageNo"
      :page-size.sync="listQuery.pageSize"
      :total="total"
      :page-sizes="[5, 10, 30, 50, 100]"
      :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
    >
    </vxe-pager>

    <el-dialog title="还款" :visible.sync="repayWindow" :close-on-click-modal="false" >
      <el-form ref="repayWindowForm" :model="repayWindowForm" status-icon label-position="right" label-width="80px" style="width: 90%; margin-left:50px;">
        <el-form-item label="期数" prop="term">
          <el-input v-model="repayWindowForm.term" disabled></el-input>
        </el-form-item>
        <el-form-item label="未还本金" prop="surplusAmonunt">
          <el-input v-model="repayWindowForm.surplusAmonunt" disabled><template slot="append">元</template></el-input>
        </el-form-item>
        <el-form-item label="未还利息" prop="surplusInterest">
          <el-input v-model="repayWindowForm.surplusInterest" disabled><template slot="append">元</template></el-input>
        </el-form-item>
        <el-form-item label="还款日期"  :rules="{ required: true, message: '还款日期不能为空', trigger: 'blur' }" prop="repayDate">
          <el-date-picker v-model="repayWindowForm.repayDate" clearable type="date" placeholder="请选择还款日期" value-format="yyyy-MM-dd" :picker-options="pickerOptions"> </el-date-picker>
        </el-form-item>
        <el-form-item label="本金" prop="principal" :rules="{ required: true, message: '本金不能为空', trigger: 'blur' }">
          <el-input v-model="repayWindowForm.principal" required><template slot="append">元</template></el-input>
        </el-form-item>
        <el-form-item label="利息" prop="interest" :rules="{ required: true, message: '利息不能为空', trigger: 'blur' }">
          <el-input v-model="repayWindowForm.interest" required><template slot="append">元</template></el-input>
        </el-form-item>
        <el-form-item label="罚息" prop="fineInterest">
          <el-input v-model="repayWindowForm.fineInterest"><template slot="append">元</template></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="cancel('repayWindowForm')">取消</el-button>
        <el-button type="primary" size="small" @click="addRepayRecord('repayWindowForm')">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="提前还款" :visible.sync="advancePaymentWindow" :close-on-click-modal="false" v-loading="loading" style="width: 80%">
      <el-form ref="advancePaymentForm" :model="advancePaymentForm" status-icon label-position="right" label-width="80px" style="width: 90%; margin-left:50px;" :disabled="advancePaymentForm.isSettled == true">
        <el-form-item label="还款日期"  :rules="{ required: true, message: '还款日期不能为空', trigger: 'blur' }" prop="repayDate">
          <el-date-picker v-model="advancePaymentForm.repayDate" clearable type="date" placeholder="请选择还款日期" value-format="yyyy-MM-dd" :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>
        <el-form-item label="合计本金" prop="amount">
          <el-input v-model="advancePaymentForm.amount" disabled><template slot="append">元</template></el-input>
        </el-form-item>
        <el-form-item label="合计利息" prop="interest">
          <el-input v-model="advancePaymentForm.interest" disabled><template slot="append">元</template></el-input>
        </el-form-item>
        <el-form-item label="违约金" prop="breachAmount">
          <el-input v-model="advancePaymentForm.breachAmount" required><template slot="append">元</template></el-input>
        </el-form-item>
        <el-form-item label="合计罚息" prop="fineInterest">
          <el-input v-model="advancePaymentForm.fineInterest" required><template slot="append">元</template></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align: right">
        <el-button size="small" type="danger" @click="cancel('advancePaymentForm')">取消</el-button>
        <el-button type="primary" size="small" @click="advancePayment('advancePaymentForm')" v-if="advancePaymentForm.isSettled == false">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="还款记录" :visible.sync="repayRecordWindow" :close-on-click-modal="false" >
      <vxe-table
        v-loading="loading"
        :data="repayRecordData"
        border="none"
        highlight-hover-row
        show-header-overflow
        show-overflow
        align="center"
        :header-cell-style="{ background: '#F7F7F8', color: '#606266' }"
        @cell-dblclick="cellDblclick"
      >
        <vxe-table-column type="seq" title="序号" width="50"/>
        <vxe-table-column title="还款日期" field="repayDate" min-width="120"/>
        <vxe-table-column title="本金" field="principal" min-width="100"/>
        <vxe-table-column title="利息" field="interest" min-width="100"/>
        <vxe-table-column title="罚息" field="fineInterest" min-width="100"/>
      </vxe-table>
      <el-pagination
        background
        @size-change="listRepayRecord"
        @current-change="listRepayRecord"
        :page-sizes="[5, 10, 20, 50]"
        :current-page.sync="repayRecordQuery.pageNo"
        :page-size.sync="repayRecordQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="repayRecordTotal">
      </el-pagination>
      <el-button type="danger" @click="closeRepayRecordWindow" class="dialog-footer" style="width:150px;height:40px;display:block;margin:0 auto;">关闭窗口</el-button>
    </el-dialog>
  </div>
</template>

<script>
import { listRepayPlan, listLoanStatus,advancePayment,addRepayRecord,listRepayRecord,getProjectNoAmountAndInterest } from '@/api/repayPlan';
import { allOrg} from '@/api/org';
import { allCapitals} from '@/api/capital';
import DicSelect from '@/components/select/index';
export default {
  name: 'User',
  components: { DicSelect },
  props:{
  },
  data: function () {
    return {
      active: 0,
      taskData: [],
      total: 0,
      listQuery: {
        pageNo: 1,
        pageSize: 10,
        projectId: undefined,
        borrowerName: undefined,
        orgId: undefined,
        capitalId: undefined,
        LoanStatus: undefined,
        repayPlanUploadStatus: undefined,
      },
      repayRecordData: [],
      repayRecordTotal: 0,
      repayRecordQuery: {
        pageNo: 1,
        pageSize: 5,
        planId: undefined,
      },
      repayWindowForm: {
        planId: undefined,
        repayDate: undefined,
        surplusAmonunt: undefined,
        surplusInterest: undefined,
        principal: undefined,
        interest: undefined,
        fineInterest: undefined,
      },
      advancePaymentForm: {
        projectId: undefined,
        repayDate: undefined,
        amount: undefined,
        interest: undefined,
        breachAmount: undefined,
        fineInterest: undefined
      },
      fileList: [],
      repayData: [],
      allOrgs:[],
      capitals:[],
      loanStatusArr:[],
      showAll:true,
      repayWindow:false,
      repayRecordWindow:false,
      advancePaymentWindow:false,
      loading: true,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
    };
  },
  computed: {
    showOperation: function() {
   if (this.showAll == false) {
    //对文字进行处理
    return "展开";
   } else {
    return "收起";
   }
  }
  },
  mounted(){


  },
  created(){
    this.getList();
    this.allOrg();
    this.allCapitals();
    this.listLoanStatus();
    this.repayData = JSON.parse(this.$route.query.parentRepayData);
    this.listQuery.projectId = this.repayData.projectId
  },
  // getTask
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },

    listLoanStatus() {
      this.loading = true;
      listLoanStatus().then((data) => {
        this.loanStatusArr = data.data
        this.loading = false;
      });
    },
    allOrg() {
      this.loading = true;
      allOrg().then((data) => {
        this.allOrgs = data.data
        this.loading = false;
      });
    },
    allCapitals() {
      this.loading = true;
      allCapitals().then((data) => {
        this.capitals = data.data
        this.loading = false;
      });
    },

    // 列表查询
    getList() {
      this.loading = true;
      listRepayPlan(this.listQuery).then((data) => {
        this.taskData = data.data;
        this.total = data.total;
        console.log('响应数据:%o', data);
      });
      this.loading = false;
    },

    listRepayRecord() {
      this.loading = true;
      listRepayRecord(this.repayRecordQuery).then((data) => {
        this.repayRecordData = data.data;
        this.repayRecordTotal = data.total;
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },

    toRepayRecord(row) {
      this.repayRecordWindow = true;
      this.repayRecordQuery.planId = row.id;
      this.listRepayRecord();
    },

    openRepayWindow(row) {
      // this.$refs['repayWindowForm'].resetFields();
      this.repayWindow = true;
      this.repayWindowForm.planId = row.id;
      this.repayWindowForm.term = row.term;
      this.repayWindowForm.surplusAmonunt = row.surplusAmonunt;
      this.repayWindowForm.surplusInterest = row.surplusInterest;
    },

    cancel(formName) {
      this.repayWindow = false;
      this.advancePaymentWindow = false;
      this.$refs[formName].resetFields();
    },
    closeRepayRecordWindow() {
      this.repayRecordWindow = false;
    },

    addRepayRecord(formName) {
      console.log(this.repayWindowForm)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('你确定要提交吗?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',}).then(() => {
            // 开始提交信息
            this.loading = true;
            addRepayRecord(this.repayWindowForm).then((data) => {
              this.loading = false;
              this.repayWindow = false;
              this.$notify.success({title: '成功',message: '操作成功'})
              this.getList()
              this.$refs[formName].resetFields();
            }).catch(() => {
              this.loading = false
            })
          })
        } else {
          return false
        }
      })
    },
    changePage() {
      this.getList();
    },

    openAdvancePayment() {
      this.loading = true;
      getProjectNoAmountAndInterest({"projectId": this.repayData.projectId}).then((data) => {
        this.advancePaymentForm = data.data
        this.advancePaymentWindow = true;
        this.loading = false;
      }).catch(() => {
        this.loading = false
      })
    },
    advancePayment(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('你确定要提交吗?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',}).then(() => {
            // 开始提交信息
            this.loading = true;
            advancePayment(this.advancePaymentForm).then((data) => {
              this.loading = false;
              this.advancePaymentWindow = false;
              this.$notify.success({title: '成功',message: '操作成功'})
              this.getList()
              this.$refs[formName].resetFields();
            }).catch(() => {
              this.loading = false
            })
          })
        } else {
          return false
        }
      })
    },

    restForm(formName) {
      this.$refs[formName].resetFields();
      this.getList();
    },
    cellDblclick({row,rowIndex,column,columnIndex,cell},event) {
      let _this = this;
      this.$copyText(event.target.innerText).then(function() {
        _this.$message.info('复制成功');
      });
    }
  },
};
</script>

<style lang="css" scoped>
.filter-container {
  display: flex;
  justify-content: space-between;
}
.pager{
  position: fixed;
  bottom: 0;
  right: 28px;
  background-color: #FAFAFB;
  z-index: 2;
  height: 40px;
  width: calc(100% - 260px);
  }

.right >>> .el-button--primary,.el-button--default {
  padding: 10px 20px;
}
.vxe-table--render-default >>> .el-button--text{
  color: #2b7bfb;
}
.app-container >>> .vxe-table--render-default,.vxe-pager {
  font-family: PingFangSC, Arial, Helvetica, sans-serif;
}

.left {
  flex: 14;
  display: flex;
  flex-flow: row wrap;
  margin-right: 20px;
}
.left >>> .el-form {
  width: 100%;
}
.left >>> .el-form .el-form-item {
  display: flex;
  flex-flow: row nowrap;
  width: 30%;
  margin-right: 3%;
  float: left;
  margin-bottom: 14px;
}

.left >>> .el-form .el-form-item .el-form-item__label {
  font-weight: 500;
  color: #606266;
  text-align: left;
  /* flex: 1; */
}

.left >>> .el-form .el-form-item .el-form-item__content {
  flex: 1;
  /*超出部分隐藏*/
  text-overflow: ellipsis;
  /* 超出部分显示省略号 */
  white-space: nowrap;
  /*规定段落中的文本不进行换行 */
  width: 100%;
}
.date_item {
  width: 100%;
}
.right {
  flex: 2;
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end;
  margin-right: 30px;
  /* margin-bottom: 30px; */
}

.table_wrap{
  border-spacing: 0px;
  width: 100%;
}
.table_title{
  background-color: #F2F2F2;
  border-top: 0px solid #c7c7c7;
  border-right: 0px solid #c7c7c7;
  border-left: 0px solid #c7c7c7;
  padding-left: 20px;
  width: 10%;
  line-height: 40px;
}
.table_td {
  text-align: center;
  line-height: 38px;
  min-width: 40px;
  border: 1px solid #e3e1e1;
}

.td_color{
  background-color: #f4f4f4;
}

.table {
  background-color: #FFFFFF;
  font-size: 14px;
  width: 95%;
  margin:0 auto;
}
.el-pagination{
  text-align: right;
}

</style>
